<!--
* description: 标签打印
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="箱号打印"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="600px"
      @close="close"
      :custom-class="formField.printNum > 1 ? 'printDialog' : ''"
    >
      <dialogHeader
        slot="title"
        title="箱号打印"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div class="filter-container filter-params" style="position: relative">
        <div class="printMain" ref="print">
          <el-button
            size="medium"
            type="primary"
            class="printBtn"
            @click="print"
            >打印</el-button
          >
          <div
            style="page-break-after: always"
            v-for="(item, index) in listRow"
            :key="index"
            class="printInfoP"
          >
            <div class="printInfo" style="position: relative">
              <div class="printInfoRow">
                经销商：{{ item.PARTNER_SHORT_NAME }}
              </div>

              <div class="printInfoRow">
                <div
                  class="qrcode"
                  :id="'qrcode' + index"
                  style="position: absolute; right: 80px; top: 20px"
                ></div>
              </div>
              <div class="printInfoRoa">箱号：{{ item.CASE_CODE }}</div>
              <div class="printInfoRox">
                <span class="printInfoRowSpan"
                  >联系人：{{ item.LINK_MAN }}</span
                >
                <p>
                  <span class="printInfoRowSpan"
                    >联系电话：{{ item.LINK_MAN_TEL }}</span
                  >
                </p>
              </div>
              <div class="printInfoRob">经销商地址：{{ item.ADDRESS }}</div>
            </div>
            <div class="footer">第{{ index + 1 }}页</div>
          </div>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer"></div> -->
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
import QRCode from "qrcodejs2";

export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), //弹窗标题
  },
  props: {
    isPrintShow: { type: Boolean, default: false },
    rowData: { type: Object, default: {} },
    formField: { type: Object, default: {} },
  },
  data() {
    return {
      // 是否显示
      showDialog: this.isPrintShow,
      // 箱号信息
      listRow: [],
    };
  },
  created() {
    if (this.showDialog) {
      this.queryInfo();
    }
  },
  methods: {
    queryInfo() {
      request({
        url: "/mp/wm/vl/basedata/partner/caseNoPrinting.do",
        method: "post",
        data: {
          caseNoNum: this.formField.printNum,
          WAREHOUSE_ID: this.formField.WAREHOUSE_ID,
          PARTNER_ID: this.rowData.PARTNER_ID,
          PARTNER_CODE: this.rowData.PARTNER_CODE,
        },
      })
        .then((res) => {
          if (res.result === "1") {
            this.listRow = res.listRow;
            this.$nextTick(() => {
              this.creatQrCode();
            });
          } else {
            this.$message({
              message: res.debugMsg ? res.debugMsg : res.msg,
            });
            this.showDialog = false;
            this.$emit("detailPrintClose");
          }
        })
        .catch((err) => {
          this.$message({
            message: "因网络错误导致此操作无法完成",
          });
          this.showDialog = false;
          this.$emit("detailPrintClose");
        });
    },
    // createJsBarcode() {
    //   setTimeout(() => {
    //     this.listRow.forEach((item, index) => {
    //       JsBarcode("#barcode" + index, item.CASE_CODE, {
    //         format: "CODE39",
    //         lineColor: "#000",
    //         background: "#ffffff",
    //         width: 1,
    //         displayValue: false
    //       });
    //     });
    //   }, 50);
    // },

    // 二维码
    creatQrCode() {
      for (let i = 0; i < this.listRow.length; i++) {
        new QRCode("qrcode" + i, {
          text: this.listRow[i].CASE_CODE, // 需要转换为二维码的内容
          width: 56,
          height: 56,

          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }
    },

    close() {
      this.showDialog = false;
      this.$emit("detailPrintClose");
    },
    // .qrcode { float: right;padding-right:495px;position: relative;ottom: 15px;}
    print() {
      let styles = `@page{size: auto; margin: 0mm;} 
      .footer {display: none;}
      .printBtn {display: none;} 
      .printInfoP {padding-top:10px;font-size: 12px;padding-left: 8px; font-family:华康金刚黑;} 
      .printInfoRow { padding: 0px 0px; margin-buttom:1px;padding-top:10px; font-family:华康金刚黑; }
      .printInfoRowSpan {  position: relative; top:11px; font-family:华康金刚黑;}
      .printInfoRob {position: relative; top:10px;  word-break:break-all;word-wrap:break-word;width: 300px; font-family:华康金刚黑;}
      //  .printInfoRow img {width: 200px;height: 45px;}
      .printInfoRow .printInfoRowSpan { width: 40%; float: left; }`;
      this.$printJs.printByEle(this.$refs.print, styles);
      this.$printJs.getStyle(this.$refs.print);
      this.showDialog = false;
      this.$emit("detailPrintClose");
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .printDialog {
  height: 85%;
}
/deep/ .el-dialog__body {
  height: calc(100% - 41px);
}
// .qrcode {
//   position: relative;
//   bottom: 15px;
//   float: right;
//   padding-right: 270px;
//   display: inline-block;
//   img {
//     width: 132px;
//     height: 132px;
//     background-color: #fff; //设置白色背景色
//     padding: 6px; // 利用padding的特性，挤出白边
//     box-sizing: border-box;
//   }
// }
.printMain {
  width: 100%;
  .printInfo {
    padding-left: 20px;
    text-align: left;
    .printInfoRow {
      padding: 1px 0px;
      .printInfoRowSpan {
        width: 40%;
        float: left;
      }
      // img {
      //   width: 350px;
      //   height: 80px;
      // }
    }
  }
  .printInfoRowSpan1 {
    position: relative;
    top: 10px;
  }
  .printInfoRob {
    width: 300px;
    position: relative;
    bottom: 10px;
    word-break: break-all;
    word-wrap: break-word;
  }
  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
  }
}
.printBtn {
  position: fixed;
  z-index: 99999999;
  line-height: 24px;
  margin-left: -150px;
}
// @media print {
//   .footer {
//     display: none;
//   }
//   .printBtn {
//     display: none;
//   }
//   .printInfoP {
//     padding-top: 200px; //控制上下
//     font-size: 20px; // 控制字体大小
//     .printInfo {
//       padding-left: 0px; //控制左右
//     }
//   }
// }
</style>